<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <title>Team</title>
</head>
<body>
<main class="ui fluid container" id="vteam">
    <div class="ui grid">
        <div class="ten wide column">
            <div class="ui raised segments">
                <h2 class="ui header">比赛</h2>
                <a :href="'/contest/create/'+id" class="ui button"><i class="ui plus green inverted icon"></i>添加比赛</a>
                <div class="ui segment" v-for="c in contests">
                    <div class="content">
                        <a :href="'/contest/'+c.id" class="ui header" v-html="c.title"></a>
                        <div class="description" v-html="c.normalStartTime"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="six wide column">
            <div class="ui segment">
                <div class="ui dimmer" :class="{active:dim}"></div>
                <h2>{{id}} - {{name}}</h2>
                <h3>成员管理</h3>
                <div>
                    <h4>加入申请</h4>
                    <div class="ui field">
                        <label for="attend">加入方式</label>
                        <select @change="update_attend()" id="attend" name="attend" v-model="attend">
                            <option value="public">Public</option>
                            <option value="private">Private</option>
                        </select>
                    </div>
                    <h3>邀请码</h3>
                    <p>{{inviteCode}}</p>
                    <div class="ui middle aligned divided list selection">
                        <div class="item" v-for="a in apply">
                            <div class="ui right floated" v-if="a.active">
                                <div class="ui icon button tiny circular green" @click="do_apply(a.id,'approve')"><i
                                        class="ui check icon"></i></div>
                                <div class="ui icon button tiny circular red" @click="do_apply(a.id,'reject')"><i
                                        class="ui close icon"></i></div>
                            </div>
                            <div class="content">
                                <div class="header">{{a.user.name}}</div>
                                <div class="meta" v-if="!a.active">{{a.result}}&nbsp;&nbsp;-&nbsp;&nbsp;{{a.time}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui divider"></div>
                <div class="ui middle aligned divided list selection" v-for="m in teammates">
                    <div class="link item"><a v-bind:href="'/user/'+m.user.id">{{m.user.name}}</a>
                        <div class="ui mini basic orange label" v-if="m.level==0">master</div>
                        <div class="ui mini teal basic label" v-if="m.level==1">manager</div>
                        <div class="right floated">
                            <div @click="set_manager(m.id)" class="ui button orange tiny"
                                 v-if="m.level==2">设为管理员
                            </div>
                            <div @click="remove_manager(m.id)" class="ui button yellow tiny"
                                 v-if="m.level==1">移除管理员
                            </div>
                            <div @click="delete_member(m.id,m.user.id)" class="ui button red tiny">
                                <i class="ui close icon"></i>移除成员
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<footer th:replace="~{fragment/footer :: footer}"></footer>
<script>
    tid = location.pathname.split('/');
    tid = tid[tid.length - 1];
    vteam = new Vue({
        el: "#vteam",
        data: {
            inviteCode: "",
            id: 0,
            name: "",
            description: "",
            teammates: [],
            creator: {},
            contests: [],
            attend: "public",
            normalCreateTime: "",
            createTime: "",
            apply: [],
            dim: true
        },
        methods: {
            set_manager(id) {
                var that = this;
                that.dim = true;
                axios.post('/api/team/add/manager/' + id + "/" + tid).then(function (res) {
                    if (res.data != "success") {
                        alert("failed");
                    } else {
                        location.reload();
                    }
                }).catch(function (res) {
                    alert("denied");
                }).finally(function () {
                    that.dim = false;
                });
            },
            remove_manager(id) {
                var that = this;
                that.dim = true;
                axios.post('/api/team/remove/manager/' + id + "/" + tid).then(function (res) {
                    if (res.data != "success") {
                        alert("failed");
                    } else {
                        location.reload();
                    }
                }).catch(function (res) {
                    alert("denied");
                }).finally(function () {
                    that.dim = false;
                });
            },
            delete_member(id, uid) {
                var that = this;
                if (user_bar.user.id == uid) {
                    alert("我踢我自己？？？");
                    return;
                }
                if (confirm("确定吗")) {
                    that.dim = true;
                    axios.delete('/api/team/delete/teammate/' + id + "/" + tid).then(function (res) {
                        if (res.data != "success") {
                            alert("failed");
                        } else {
                            location.reload();
                        }
                    }).catch(function (res) {
                        alert("denied");
                    }).finally(function () {
                        that.dim = false;
                    });
                }
            },
            do_apply(id, option) {
                var that = this;
                that.dim = true;
                axios.post("/api/team/apply/" + option + "/" + id + "/" + tid)
                    .then(function (res) {
                        if (res.data != "success") {
                            alert(res.date);
                        } else {
                            location.reload();
                        }
                    })
                    .catch(function (res) {
                        alert("denied");
                    }).finally(function () {
                    that.dim = false;
                });
            },
            update_attend() {
                var that = this;
                that.dim = true;
                axios.get("/api/team/update/attend/" + tid + "?attend=" + this.attend)
                    .then(function (res) {
                        if (res.data != "success") {
                            alert(res.data);
                        }
                    }).catch(function (e) {
                    if (e.response.status === 403) {
                        alert("Permission denied")
                    } else {
                        alert("error");
                    }
                }).finally(function () {
                    that.dim = false;
                });
            }
        },
        created() {
            var that = this;
            axios.get('/api/team/' + tid)
                .then(function (res) {
                    res = res.data;
                    that.id = res.id;
                    that.name = res.name;
                    that.description = res.description;
                    that.teammates = res.teammates;
                    that.creator = res.creator;
                    that.contests = res.contests;
                    that.attend = res.attend;
                    that.normalCreateTime = res.normalCreateTime;
                    that.createTime = res.createTime;
                });
            axios.get('/api/team/showapply/' + tid)
                .then(function (res) {
                    res = res.data;
                    that.apply = res;
                    for (a of that.apply) {
                        a.time = new Date(a.time).toLocaleString();
                    }
                });
            axios.get('/api/team/invite/' + tid)
                .then(function (res) {
                    that.inviteCode = res.data;
                });
            setTimeout(function () {
                that.dim = false
            }, 500);
        }
    })
</script>
</body>
</html>